 <template>
   <el-table
       :cell-style="{'text-align':'center'}"
       :data="feedbackData"
       :header-cell-style="{'text-align':'center'}" border
       row-key="id"
       style="width: 100%">
     <el-table-column width="200" :sortable="true" label="反馈模块" prop="model"/>
     <el-table-column width="200" :sortable="true" label="反馈对象" prop="accountNo"/>
     <el-table-column width="330" :sortable="true" label="反馈内容" prop="content"/>
     <el-table-column width="100" :sortable="true" label="类型" prop="type">
       <template #default="scope">
         <el-tag v-if="scope.row.type === '1'" size="small" type="danger">Bug</el-tag>
         <el-tag v-else-if="scope.row.type === '2'" size="small" type="warning">意见</el-tag>
       </template>
     </el-table-column>
     <el-table-column width="120" :sortable="true" label="状态" prop="feedbackStatus">
       <template #default="scope">
         <el-tag v-if="scope.row.feedbackStatus === '0'" size="small" type="danger">未处理</el-tag>
         <el-tag v-else-if="scope.row.feedbackStatus === '1'" size="small" type="info">已分配待处理</el-tag>
         <el-tag v-else-if="scope.row.feedbackStatus === '2'" size="small" type="success">已处理</el-tag>
       </template>
     </el-table-column>
     <el-table-column width="200" :sortable="true" label="提交时间" prop="createdTime"/>
     <el-table-column width="200" :sortable="true" label="处理时间" prop="handleTime"/>
     <el-table-column class="operate" label="操作" prop="operate" width="300">
       <template v-slot="scope">
         <el-button
             v-if="scope.row.feedbackStatus==='0'"
             icon="Odometer"
             size="small" type="warning"
             @click="handleClick(scope.row)"
         >马上处理
         </el-button>
         <el-button
             v-else-if="scope.row.feedbackStatus==='1'"
             icon="CircleCheck"
             size="small" type="success"
             @click="handleClick(scope.row)"
         >处理完成
         </el-button>
         <el-button
             v-if="scope.row.feedbackStatus==='1'||scope.row.feedbackStatus==='2'"
           size="small"
             type="primary"
           @click="seeFeedback(scope.row)"
         >意见反馈
         </el-button>
         <el-button
             type="danger"
             size="small"
             @click="deleteById(scope.row)"
         >删除
         </el-button>
       </template>
     </el-table-column>
   </el-table>
   <el-dialog v-model="feedbackForm">
   <el-form label-width="80px" >
     <el-form-item label="意见反馈">
       <el-input type="textarea" v-model="this.feedbackContent"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="this.feedback">确定</el-button>
       <el-button @click="this.goBack">取消</el-button>
     </el-form-item>
   </el-form>
   </el-dialog>
   <el-pagination
       class="pagination"
       :page-size="pageSize"
       small
       :pager-count="5"
       :page-sizes="[10, 30 ,  100 , 200]"
       :total="total"
       layout="total, sizes, prev, pager, next"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange">
   </el-pagination>
 </template>
 <script>
 import request from "@/util/request.js";
 export default {
   name: "FeedbackHandle",
   data() {
     return {
       feedbackForm: false,
       pageNum: 1,
       pageSize: 10,
       total: 0,
       feedbackData: [],
       feedbackContent: "",
       id: 0,
     }
   },
   created() {
     this.getData()
   },
   methods: {
     getData() {
       request.get("/related_feedback/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&accountNo=" + JSON.parse(localStorage.getItem('user')).accountNo).then(res => {
         console.log(res.data)
         if (res.data.code === '200') {
           for (let key in res.data.data) {
             if (key === "records") {
               this.feedbackData = res.data.data[key];
             } else if (key === "total") {
               this.total = res.data.data[key];
             }
           }
           console.log(this.feedbackData)
         }
       })
     },
     seeFeedback(scope){
       console.log(scope.feedbackContent)
       this.feedbackContent = scope.feedbackContent
       this.feedbackForm = true;
       this.id = scope.id
     },
     handleClick(scope) {
       request.get("/related_feedback/handle?id=" + scope.id).then(() => {
         this.$message({
           type: 'success',
           message: '操作成功!'
         });
         window.location.reload()
       })
     },
     //表尾分页
     handleSizeChange(val) {
       this.pageSize = val;
       this.getData();
     },
     handleCurrentChange(val) {
       this.pageNum = val;
       this.getData();
     },
     feedback(scope){
      request.get("/related_feedback/feedbackContent?id=" + this.id +"&feedbackContent=" + this.feedbackContent).then(res =>{
        if (res.data.code === '200'){
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          location.reload()
        }else {
          this.$message({
            type:'warning',
            message:'操作失败'
          })
          location.reload()
        }
      })
     },
     goBack(){
       this.feedbackForm= false
       this.feedbackContent= ""
       this.id= 0
     },
     deleteById(scope){
       this.$confirm('此操作将永久删除该意见, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
       request.get("/related_feedback/deleteById?id=" +scope.id).then(res =>{
         if(res.data.code === '200'){
           this.$message({
             type: 'success',
             message: '操作成功!'
           })
           location.reload()
         }
       })
       })
     },
   }
 }
 </script>

 <style scoped>

 </style>
